<template>
    <div class="flexWrap">
        <div class="flexWrap">
            <el-form ref="form" :model="form" size="small" :rules="rules" label-width="100px">
                <el-form-item prop="name" required label="项目名称" >
                    <el-input v-model="form.name" class="w-px400" />
                </el-form-item>
                <el-form-item required prop="leader" label="项目负责人">
                    <el-select class="w-px400" size="small"
                               v-model="form.leader"
                               placeholder="请选择">
                        <el-option v-for="u in userAry" :key=u.id :label=u.name :value=u.id />
                    </el-select>
                </el-form-item>
                <el-form-item required prop="leader" label="参与人员">
                    <el-select class="w-px400" size="small"
                               multiple v-model="form.users"
                               placeholder="请选择"
                    @change="toUpdate">
                        <el-option v-for="u in userAry" :key=u.id :label=u.name :value=u.id />
                    </el-select>
                </el-form-item>
                <el-form-item required prop="status" label="项目状态">
                    <el-select clearable v-model="form.status" placeholder="请选择" class="w-px400">
                        <el-option
                            v-for="item in statusAry"
                            :key="item.v" :label="item.n" :value="item.v">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="flexWrapCenter w-per100 mt-30">
            <el-button @click="toClose">取 消</el-button>
            <el-button type="primary" @click="toSubmit">保 存</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name: "project-edit",
    props: {
        info: {
            type: Object
        },
        complete: {
            type:Function
        }
    },
    data() {
        return {
            statusAry: [{n:'正常',v:1},{n:'已完成',v:2},{n:'已废弃',v:-1}],
            form: {
                id: '', name:"", users:[]
            },
            rules: {
                name:[
                    { required: true, message: '项目名称不能空' },
                ],
                leader:[
                    { required: true, message: '项目负责人不能空' },
                ],
                status:[
                    { required: true, message: '项目状态不能空' },
                ],
            },
            userAry:[]
        };
    },
    components: {

    },
    created() {
        this.form = this.info
        this.fetchUser()
        this.form.users = []
        if (this.form.userAry && this.form.userAry.length > 0) {
            for (let i = 0; i < this.form.userAry.length; i++) {
                this.form.users.push(this.form.userAry[i].id)
            }
        }
    },
    methods: {
        toClose() {
            this.$emit("complete");
        },

        toUpdate() {
            this.$forceUpdate()
        },

        fetchUser() {
            this.request.get({
                url: "user.list", data: {noRole:6} //排除协作者
            }).then(res => {
                this.userAry = res.result || []
            },res => {

            })
        },

        toSubmit() {
            this.$refs["form"].validate((valid) => {
                if (!valid) { return false }

                this.form.userAry = []

                this.request.post({
                    url: "project.save",
                    data: this.form
                }).then(res => {
                    this.$message.success({message:"保存成功！", duration:1000});
                    setTimeout(() => {
                        this.$emit("complete");
                        this.form = {}
                    }, 1000)
                }, res => {
                    this.$message.error(res.msg || '保存失败');
                })
            });
        }
    },
};
</script>
<style scoped lang="scss">

</style>
